<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
   
<head> 
  <meta charset="utf-8">
  <title>评教管理</title>
  <link rel="stylesheet" href="../plugins/elementui/index.css"/>
  <script src="../plugins/jquery/dist/jquery.min.js"></script>
  <script src="../plugins/vue/vue.js"></script>

  <link rel="stylesheet" href="../plugins/theme-chalk/index.css">
  <link rel="stylesheet" href="../css/semantic.css">
  <script src="../plugins/vue/axios-0.18.0.js"></script>
  <script src="../plugins/elementui/index.js"></script>

</head>
 
   
<body>
 
<div id="app">

  <div class="ui grid" style="margin-left: 20px">
    <div class="eleven wide column">
      <!--#21ba45-->
      <div v-if="patriarchFlag"
           style="border-color: #404040!important;color: #404040!important;font-size: 18px">
        尊敬的<span class="spanClass">{{studentBean.studentName}}</span>学生家长: 您目前孩子所在班级为:<span
          class="spanClass">{{studentBean.className}}</span><br/>
        所在班级班主任:<span class="spanClass">{{studentBean.classTeacher}}</span>
      </div>
      <div class="ui green secondary pointing menu" style="margin-top: 1em;">
        <a class="active item">最新老师评分</a>
        <div v-if="patriarchFlag" class="right item">
          <a class="positive ui button" @click="commentTeacher"><i class="write icon"></i>我要评论</a>
        </div>
      </div>

      <span v-for="bean in CommentTeacherList">
      <div class="ui divided items" style="margin-bottom: 15px">
        <div class="item">
          <div class="ui avatar image mini">
            <img src="../upload/images/headimg_placeholder.png">
          </div>
          <div class="content">
            <a class="header" style="font-size: 15px;" href="/discuss/9">
              <p>{{bean.textarea}}</p>
            </a>
            <div class="extra" style="font-size: 13px;">
              <span>{{bean.studentName}}</span>
              <span>2021-03-02 12:05:56发表</span>
              <span>班主任：{{bean.teacherName}}</span>
              <el-rate
                  v-model="value"
                  disabled
                  show-score
                  text-color="#ff9900"
                  v-model="bean.value"
                  score-template="{value}">
                </el-rate>
            </div>
          </div>
        </div>
      </div>
    </span>
      <div class="pagination-container">
        <el-pagination
            class="pagiantion"
            @size-change="queryCommentTeacherList"
            @current-change="queryCommentTeacherList"
            :current-page.sync="pagination.currentPage"
            :page-size="pagination.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="pagination.total">
        </el-pagination>
      </div>
      <div class="surrenderApply">
        <el-dialog width="55%" title="老师评价" :visible.sync="commentTeacherFlag">
          <div class="block" style="margin-bottom: 10px">
            <span class="demonstration">请给老师评分：</span>
            <el-rate v-model="commentBean.value"></el-rate>
          </div>

          <div style="margin-bottom: 5px">评论内容:</div>
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="commentBean.textarea">
          </el-input>
          <div slot="footer" class="dialog-footer">
            <el-button type="info" @click="commentTeacherFlag = false">我再想想</el-button>
            <el-button type="success" @click="submitCommentTeacher">提交</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</div>
</body>
 
<script>
  new Vue({
    el: "#app",
    data: {
      patriarchFlag: false,
      studentBean: {
        studentName: "阿旺",
        className: "三年级二班",
        classTeacher: "旭旭"
      },
      commentTeacherFlag: false,
      commentBean: {textarea: "", value: 5},
      value: 4,
      CommentTeacherList: [
        {
          studentName: "旺旺",
          teacherName: "王老师",
          commentTime: "2020-01-02 21:23:12",
          textarea: "老师好家伙",
          value: 4
        },
        {
          studentName: "旺旺",
          teacherName: "王老师",
          commentTime: "2020-01-02 21:23:12",
          textarea: "老师好家伙",
          value: 4
        },
        {
          studentName: "旺旺",
          teacherName: "王老师",
          commentTime: "2020-01-02 21:23:12",
          textarea: "老师好家伙",
          value: 4
        },
        {
          studentName: "小刘",
          teacherName: "史老师",
          commentTime: "2020-01-02 21:23:12",
          textarea: "老师扣脚，不太正经",
          value: 2
        },
        {
          studentName: "旺旺",
          teacherName: "王老师",
          commentTime: "2020-01-02 21:23:12",
          textarea: "老师好家伙",
          value: 4
        },
      ],
      /*分页*/
      pagination: {
        total: 1,
        currentPage: 1,
        pageSize: 10
      },
    },
    created() {
      this.queryCommentTeacherList();
      this.queryCreatedClass();
    },
    methods: {
      queryCommentTeacherList() {
        let pageQuery = {
          pageIndex: this.pagination.currentPage,
          pageCount: this.pagination.pageSize
        };
        axios.post("/user/queryCommentTeacherList", pageQuery).then((res) => {
          this.pagination.total = res.data.total;
          this.CommentTeacherList = res.data.list;
        })
      },
      queryCreatedClass() {
        axios.get("/user/queryCreatedClass").then((res) => {
          if (res.data!==null&&res.data!=='') {
            this.studentBean = res.data;
            this.patriarchFlag = true;
          }
        })
      },
      commentTeacher() {
        this.commentTeacherFlag = true;
      },
      submitCommentTeacher() {
        if (this.commentBean.textarea === null || this.commentBean.textarea === '') {
          this.$message.error("评论内容不能为空");
          return;
        }
        axios.post("/user/submitCommentTeacher", this.commentBean).then((res) => {
          if (res.data === 'success') {
            this.$message({
              type: "success",
              message: "评论成功"
            });
            this.queryCommentTeacherList();
            this.commentTeacherFlag = false;
          } else {
            this.$message.error("评论失败")
          }

        })
      }
    }
  });
</script>
</html>
<style scoped>
  .spanClass {
    font-weight: bold;
    color: #21ba45;
    margin-left: 2px;
    margin-right: 2px;
  }
</style>